<template>
  <view class="container">
    <view class="card_content">
      <view class="title" @click="toRecordDetail"> 场所详情> </view>
      <view class="title padding-t-10">提交人：王爱军</view>

      <view class="color-666 padding-t-10">巡查情况</view>
      <view class="subtitle padding-t-10"
        ><text></text>消防管道隐患风险巡查</view
      >

      <view class="record">
        <view class="record_lists" v-for="(item, index) in 6" :key="index">
          <view class="flex justify-between">
            <text>禁止违规住人</text>
            <view>
              <!-- <image
                class="i-seleted margin-l-30 margin-r-10"
                src="../../static/seleted@.png"
              />
              <image
                class="i-seleted margin-l-30 margin-r-10"
                src="../../static/seleted.png"
              /> -->
            </view>
          </view>
        </view>
      </view>

      <view class="u-demo-block">
        <text class="u-demo-block__title">巡查图片</text>
        <view class="u-demo-block__content">
          <u-upload
            :fileList="fileList1"
            @afterRead="afterRead"
            @delete="deletePic"
            name="1"
            multiple
            :maxCount="10"
          ></u-upload>
        </view>
      </view>

      <view class="u-demo-block">
        <text class="u-demo-block__title">整改时间</text>
        <view class="u-demo-block__content color-bule" @click="showDatetimePicker=true"> 请选择> </view>
      </view>

      <view class="u-demo-block">
        <text class="u-demo-block__title">基础使用</text>
        <view class="u-demo-block__content">
          <u--textarea v-model="value1" placeholder="请输入内容"></u--textarea>
        </view>
      </view>
    </view>
    <up-datetime-picker
      hasInput
      :show="showDatetimePicker"
      v-model="value1"
      mode="date"
    ></up-datetime-picker>

    <view style="height: 120rpx"></view>
    <view class="btn">
      <view class="btn-primary"> 提交 </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";

let showDatetimePicker = ref(false)

const toRecordDetail = (item) => {
  uni.redirectTo({
    url: "/pages/patrol/detail?id=" + item,
  });
};

const handlePhoneCall = (item) => {
  uni.makePhoneCall({
    phoneNumber: item,
  });
};
</script>

<style>
page {
  background: #f4f6fa;
}
</style>

<style scoped lang="scss">
.record {
  .record_lists {
    padding: 20rpx 20rpx;
    margin-bottom: 20rpx;
    background: #fafbfe;
  }
}
.u-demo-block {
  flex: 1;
  margin-bottom: 23px;
  .u-demo-block__title {
    font-size: 14px;
    color: #8f9ca2;
    margin-bottom: 8px;
    display: flex;
    flex-direction: row;
  }
}
.subtitle {
  display: flex;
  align-items: center;
  font-weight: bold;
  text {
    width: 18rpx;
    height: 36rpx;
    background: #3677f7;
    display: block;
    margin-right: 10rpx;
  }
}
.container {
  background: #f4f6fa;
  .btn {
    position: fixed;
    bottom: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn-primary {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 600rpx;
      height: 60rpx;
      font-size: 28rpx;
      padding: 10rpx 26rpx;
      background: linear-gradient(88deg, #3677f7 0%, #3ccbff 100%);
      box-shadow: 0rpx 12rpx 40rpx 2rpx rgba(54, 119, 247, 0.2);
      border-radius: 44rpx;
      opacity: 1;
      color: #fff;
    }
  }
  .card_title {
    font-weight: bold;
    font-size: 32rpx;
    color: #172641;
    padding: 20rpx 20rpx;
    .card_total {
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
      padding-left: 30rpx;
    }
  }
  .extend_list {
    padding: 0 24rpx;
    .extend_item {
      padding: 24rpx 20rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
      border-radius: 16rpx;
      margin-top: 20rpx;
      .task_number {
        font-weight: 400;
        font-size: 32rpx;
        color: #333333;
      }
      .task_label {
        display: flex;
        flex-shrink: 0;
        flex-grow: 0;
        font-weight: 400;
        font-size: 32rpx;
        color: #333333;
      }
      .extend_title {
        font-weight: 400;
        font-size: 32rpx;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20rpx;
        .overdue {
          font-size: 18rpx;
          color: #ffffff;
          padding: 4rpx 6rpx;
          background: #e63472;
          border-radius: 8rpx;
          margin-left: 10rpx;
        }
        .task_state {
          font-weight: 400;
          font-size: 24rpx;
          color: #ff0000;
        }
      }
    }
  }
  .card_content {
    width: 660rpx;
    padding: 20rpx 20rpx;
    background: #fff;
    margin: 0 auto;
  }
  .detail_title {
    font-weight: 400;
    font-size: 32rpx;
    color: #333333;
    display: flex;
    align-items: center;
    padding: 20rpx 20rpx;
    justify-content: space-between;

    .overdue {
      font-size: 18rpx;
      color: #ffffff;
      padding: 4rpx 6rpx;
      background: #e63472;
      border-radius: 8rpx;
      margin-left: 10rpx;
    }
    .task_state {
      font-weight: 400;
      font-size: 24rpx;
      color: #ff0000;
    }
  }
}
</style>
